<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<title>醉品茶城</title>
	</style>
</head>

<body>
	<!-- 创建登录表单 -->
	<form action="" method="">
		<h3>账号登陆</h3>
		<input type="text" name="" id="uname" value="" placeholder="邮箱/手机号码" />
		<br>
		<input type="text" name="" id="upwd" value="" placeholder="密码" />
		<br>
		<span id="msg" style="color: red;"></span>
		<br>
		<!-- <a href="https://zuipin.cn"></a> -->
		<input type="button" name="" id="btn" value="立即登录" />

		<a href="findpwd.html" style="color: darkgray;">忘记密码？</a>

	</form>
	<script type="text/javascript">
		//1:获取登录按钮 id=btn 并且绑定点击事件 onclick
		btn.onclick = function () {
			//1.1:创建正则表达式验证用户名密码 
			var reg1 = /^[a-zA-Z0-9]{3,11}$/;
			var reg2 = /^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}$/;
			var reg3 = /^[a-zA-Z0-9]{8,16}$/;
			//1.2:判断如果管理员名称与正则表达式不同
			if (!reg1.test(uname.value)) {
				//1.3:在id=msg 格式错误
				msg.innerHTML = "您输入账号格式有误，请核实后重新输入";
				//1.4:停止函数执行 
				return;
			}
			if (!reg3.test(upwd.value)) {
				//1.3:在id=msg 格式错误
				msg.innerHTML = "您输入密码格式有误，请核实后重新输入";
				//1.4:停止函数执行 
				return;
			}

			//创建xhr对象
			var xhr = new XMLHttpRequest();
			//打开网络链接 open
			var url = "http://127.0.0.1:3000/admin/login";
			xhr.open("POST", url, true);
			//修改   请求主体数据   格式 ！！！
			xhr.setRequestHeader("Conten-Type", "application/x-www-form-urlencoded");
			//发送数据 
			xhr.send(`uname=${uname.value}&upwd=${upwd.value}`);

			//为xhr绑定事件 onrea dystatechange
			xhr.onreadystatechange = function () {
				//判断 readyState === 4 status === 200
				if (xhr.readyState === 4 && xhr.status === 200) {
					//获取服务器返回数据
					//将服务器json数据转换js对象
					var rs = JSON.parse(xhr.responseText);
					//如果code:1 转跳 main.html
					if (rs.code === 1) {
						location.href = "main.html";
					} else {
						msg.innerHTML = "用户名或密码有误";
					}
					//如果code:0 msg.innerHTML = 用户名或密码有误
				}
			}
		}
	</script>
</body>

</html>